@charset "utf-8";
@import url('../quote/color.less');
@import url('../quote/class.less');

/*M实验*/
@media screen and (max-width: 1200px) {
  html{font-size:20px;}
}
@media screen and (max-width: 550px) {
  html{font-size:14px;} 
}
@media screen and (max-width: 420px) {
  html{font-size:13.4px;}
}
@media screen and (max-width: 380px) {
  html{font-size:12px;}
}
@media screen and (max-width: 370px) {
  html{font-size:10px;}
}

/*=============全局样式===============*/
body{
  color:@c10;
  font-size: 1.2rem;
}
/*@font-face
{
  font-family: myFirstFont;
  src: url('Sansation_Light.ttf'),
  url('Sansation_Light.eot'); !* IE9+ *!
}*/

// 标题样式
h1{font-size:2rem;}
h2{font-size: 1.8rem;}
h3{font-size: 1.6rem;}
h4{font-size: 1.4rem;}
h5{font-size: 1.3rem;}

//框架主样式
.container{background: @cf7;/*margin-top: 50px;*/}
/*---------导航---------*/
header.header{
  padding-bottom: 50px;
  .header-bar{
    position:fixed;
    top:0;
    left:0;
    .wh(100%,50px);
    background-color:rgba(16,16,16,1);
    z-index: 10;
    line-height: 50px;

    [class*=header-]{width:33.333%;height:100%;float:left;}
    .header-left{
      #logo{
        width:100px;
        margin-left:8%;
        margin-top: 7px;
      }
      .icon-arrows_left{
        font-size: 1.6rem;
        margin-left:1rem;
        color:@cf;
      }
    }
    .header-center{
      color:@cf;
      font-weight:500;
      text-align: center;
      font-size:16px;
      letter-spacing: 2px;
    }
    .header-right{
      position: relative;
      .menu-list{
        position: absolute;
        .wh(18px,18px);
        margin-top:16px;
        right:10%;
        z-index: 15;
        li{
          position:relative;
          height:2px;
          width:100%;
          background-color:@cf2;
        }
        li:before{
          position:absolute;
          left:-6px;
          content: "";
          .wh(3px,2px);
          background:@cf2;
        }
      }
    }
  }

}

div#nav{
  position: fixed;
  width:11rem;
  height:100%;
  top:0;
  left:100%;
  background-color:@c10;
  transform: translateX(0px);
  transition: transform .2s;
  z-index:9;

  //导航列表组
  .nav-item{
    margin-top:6rem;
    //列表
    .nav-list{
      color:@cc;
      font-size:1.4rem;
      margin-top:3rem;
      padding:0 2.5rem;
      //图标
      &>img{
        width:1.8rem;
        vertical-align: middle;
      }
      &>span{
        float:right;
        vertical-align: middle;
      }
    }
  }

}

footer{
  display: block;
  border-top:1px solid @cf2;
  padding:1.5rem 0;
  text-align: center;
  background-color:@cf7;
  color:@cc;
  font-size: 1rem;
}







//公共快速类样式
.body-overflow{
  overflow: hidden;
}
.auto{
  margin-left:auto;
  margin-right:auto;
}

.fill{
  left:0;
  right:0;
  top:0;
  bottom:0;
}
.bg-cover{
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.bg-fill{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/******************移动端*********************/

.mt3 {
  margin-top: 0.3rem;
}
.mt5 {
  margin-top: 0.5rem;
}
.mt7 {
  margin-top: 0.7rem;
}
.mt10 {
  margin-top:1rem;
}
.mt15 {
  margin-top: 1.5rem;
}
.mt20 {
  margin-top: 2.0rem;
}
.mt30 {
  margin-top: 3.0rem;
}
.mt40 {
  margin-top: 4.0rem;
}
.mt50 {
  margin-top: 5.0rem;
}


.mr1 {
  margin-right: 0.1rem;
}
.mr3 {
  margin-right: 0.3rem;
}
.mr5 {
  margin-right: 0.5rem;
}
.mr7 {
  margin-right: 0.7rem;
}
.mr10 {
  margin-right: 1.0rem;
}
.mr15 {
  margin-right: 1.5rem;
}
.mr20 {
  margin-right: 2.0rem;
}
.mr30 {
  margin-right: 3.0rem;
}

.ml1 {
  margin-left: 0.1rem;
}
.ml3 {
  margin-left: 0.3rem;
}
.ml5 {
  margin-left: 0.5rem;
}
.ml7 {
  margin-left: 0.7rem;
}
.ml10 {
  margin-left: 1.0rem;
}
.ml15 {
  margin-left: 1.5rem;
}
.ml20 {
  margin-left: 2.0rem;
}
.ml30 {
  margin-left: 3.0rem;
}

.pd3 {
  padding: 0.3rem;
}
.pd5 {
  padding: 0.5rem;
}
.pd7 {
  padding: 0.7rem;
}
.pd10 {
  padding: 1.0rem;
}
.pd15 {
  padding: 1.5rem;
}
.pd20 {
  padding: 2.0rem;
}
.pd30 {
  padding: 3.0rem;
}

.pdt3 {
  padding-top: 0.3rem;
}
.pdt5 {
  padding-top: 0.5rem;
}
.pdt7 {
  padding-top: 0.7rem;
}
.pdt10 {
  padding-top: 1.0rem;
}
.pdt15 {
  padding-top: 1.5rem;
}
.pdt20 {
  padding-top: 2.0rem;
}
.pdt30 {
  padding-top: 3.0rem;
}

.pdb3 {
  padding-bottom: 0.3rem;
}
.pdb5 {
  padding-bottom: 0.5rem;
}
.pdb7 {
  padding-bottom: 0.7rem;
}
.pdb10 {
  padding-bottom: 1.0rem;
}
.pdb15 {
  padding-bottom: 1.5rem;
}
.pdb20 {
  padding-bottom: 2.0rem;
}
.pdb30 {
  padding-bottom: 3.0rem;
}

.pdl3 {
  padding-left: 0.3rem;
}
.pdl5 {
  padding-left: 0.5rem;
}
.pdl7 {
  padding-left: 0.7rem;
}
.pdl10 {
  padding-left: 1.0rem;
}
.pdl15 {
  padding-left: 1.5rem;
}
.pdl20 {
  padding-left: 2.0rem;
}
.pdl30 {
  padding-left: 3.0rem;
}

.pdr3 {
  padding-right: 0.3rem;
}
.pdr5 {
  padding-right: 0.5rem;
}
.pdr7 {
  padding-right: 0.7rem;
}
.pdr10 {
  padding-right: 1.0rem;
}
.pdr15 {
  padding-right: 1.5rem;
}
.pdr20 {
  padding-right: 2.0rem;
}
.pdr30 {
  padding-right: 3.0rem;
}

.fr10{
  font-size: 1rem;
}
.fr12 {
  font-size: 1.2rem;
}
.fr14 {
  font-size: 1.4rem;
}
.fr16 {
  font-size: 1.6rem;
}
.fr18 {
  font-size: 1.8rem;
}
.fr20 {
  font-size: 2rem;
}
.fr22 {
  font-size: 2.2rem;
}

